<template>
  <div class="content-box">
    <div ref="searchBox" class="search-box flex" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
      <el-form-item label="产品集合" prop="productIds">
        <el-select
          v-model="queryParams.productIds"
          multiple
          collapse-tags
          clearable
          filterable
          placeholder="请选择"
          style="width: 240px; margin-right: 20px"
        >
          <el-option
            v-for="(item, index) in channelOptionList"
            :key="index"
            :label="item.productName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询时间" prop="dateRange">
        <el-date-picker
          :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
          clearable
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            plain
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="handleQuery"
          :columns="columnsList"
        ></right-toolbar>
      </el-row>
      <el-table
        v-sticky-header
        ref="table"
        v-loading="loading"
        :data="dataList"
      >
        <template v-for="(item,index) in columns">
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :width="getColumnWidth(index)"
            :fixed="item.fixed"
            :sortable="item.sortable ? item.sortable : false"
            :show-overflow-tooltip="item.showTooltip"
            v-if="item.visible"
            align="center"
          >
          </el-table-column>
        </template>
      </el-table>
      <!-- 使用分页插件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[10, 50, 100, 200, 500]"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import tableStickyMixins from "@/mixins/tableStickyMixins";
import { mapGetters } from "vuex";
import {getUpChannelList} from "@/api/business/channelManagement";
import moment from "moment";

import {
  queryUpCustomerStarByPage
} from "@/api/starCount/channelStar";
export default {
  // 定义名字用于标识该组件是否被keep-alive缓存
  name: "ChannelStar",
  data() {
    return {
      // 数据列表
      dataList: [],
      // 上游渠道筛选项
      channelOptionList: [],
      // 时间范围
      dateRange: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      loading: false,
      // 表格列信息（用于控制显示与隐藏)
      columnsList:[],
      // 显示搜索栏
      showSearch: true,
    };
  },
  mixins: [tableStickyMixins],
  watch: {
    columns: {
      handler() {
        this.updateTableHeight();
      },
      deep: true,
    },
  },
  created() {
    this.dateRange = [
        moment().format("YYYY-MM-DD 00:00:00"),
        moment().format("YYYY-MM-DD 23:59:59"),
    ];
    this.getChannelList()
    this.getList();
  },
  computed: {
    ...mapGetters(["sidebar", "device"]),
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
      return (index) => {
        return this.isMobile
          ? this.columns[index].mobileWidth
          : this?.sidebar?.opened
          ? this.columns[index].pcWidth - this.slightWidth
          : this.columns[index].pcWidth + 17;
      };
    },
    // 将数组转换为对象形式
    ArrayFormatObj:()=>{
       return (arr)=>{
         return arr.reduce((pre, cur)=>{
           pre[cur.value] = cur.label;
           return pre;
         },{})
       }
    },
    // 表格列信息
    columns(){
      const arr = [
       {label: `统计日期`,prop: "billTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: 'left',showTooltip: true,},
       {label: `产品名称`,prop: "simpleName",visible: true,pcWidth: 150,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
       {label: `未接通占比`,prop: "breakRatio",visible: true,pcWidth: 160,mobileWidth: 110,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,sortable:true},
       {label: `接通占比`,prop: "connectRatio",visible: true,pcWidth: 160,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,sortable:true},
       {label: `优质占比`,prop: "highRatio",visible: true,pcWidth: 160,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,sortable:true},
       {label: `进件数`,prop: "pushNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `标记数`,prop: "markNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `标记占比`,prop: "markRatio",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `0星数`,prop: "zeroNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `0星占比`,prop: "zeroRatio",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `1星数`,prop: "oneNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `1星占比`,prop: "oneRatio",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `2星数`,prop: "twoNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `2星占比`,prop: "twoRatio",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `3星数`,prop: "threeNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `3星占比`,prop: "threeRatio",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `4星数`,prop: "fourNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `4星占比`,prop: "fourRatio",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `5星数`,prop: "fiveNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       {label: `5星占比`,prop: "fiveRatio",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
      ]
      this.$set(this,'columnsList',arr)
      return arr
    }
  },
  methods: {
    // 获取渠道列表
    getChannelList(){
      getUpChannelList().then(res=>{
        this.channelOptionList = res.data
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$set(this.queryParams, "pageIndex", 1);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 完全重置到初始状态
      this.$set(this, "queryParams", {
        pageIndex: 1,
        pageSize: 10,
      });
      // 重置时间
      this.$set(this, "dateRange", [
        moment().format("YYYY-MM-DD 00:00:00"),
        moment().format("YYYY-MM-DD 23:59:59"),
      ]);
      this.getList();
    },
    /** 查询列表 */
    getList() {
      if (this.dateRange?.length) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      } else {
        delete this.queryParams.startTime;
        delete this.queryParams.endTime;
      }
      this.loading = true;
      queryUpCustomerStarByPage(this.queryParams).then((response) => {
        this.dataList = response?.data?.list
        this.total = response?.data?.total;
        this.loading = false;
      }).catch((err) => {
        setTimeout(() => {// 延迟2s后自动取消
          this.loading = false;
        }, 2000);
      })
    },
    // 修改表格高度触发回调
    updateTableHeight() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}
.search-box {
  margin: 0 0 20px;
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.search-area {
  position: absolute;
  right: 20px;
}
.el-form-item__content {
  flex: 1;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  min-width: 0;
}
::v-deep .el-dialog__body {
  border-top: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
}
.el-table {
  // 滚动条加粗
  --scrollbar-height: 9px;
}
</style>
